@layout("/common/default.html",{title:'添加',libs:['form']}){
<form class="layui-form"  lay-filter="layui-form-role" id="layui-form-role">
  <!--form表单-->
  <input type="hidden" id="onlyid" name="id" value="${role.id}">
  <input type="hidden" id="op" name="op" value="${role.op}">
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header">基本信息</div>
      <div class="layui-card-body">
        <div class="layui-form-item layui-row">

          <div class="layui-inline layui-col-md9">
            <label class="layui-form-label layui-required">角色名称</label>
            <div class="layui-input-block">
              <input type="text" id="name" name="name" value="${role.name!}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required" required="">
            </div>
          </div>

          <div class="layui-inline layui-col-md9" >
            <label class="layui-form-label">数据范围</label>
            <div class="layui-input-block">
              <#select path="dataScope"  value="${role.dataScope!}" items="${fnc.getDictList('sys_data_scope')}" layFilter="scope" />
            </div>
          </div>

          <div class="layui-inline layui-col-md9" style="display: none" id="roleztree">
            <label class="layui-form-label">部门权限</label>
            <div class="layui-card-body">
              <input type="hidden" name="officeIds" id="officeIds">
              <ul id="treeOffice" class="ztree" style="padding: 28px;"></ul>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>
  <div class="form-group-bottom" style="z-index: 200" align="center">
    <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
    <button   id="btnclose" class="layui-btn layui-btn-primary">&emsp;取消&emsp;</button>
  </div>
</form>

<!--js逻辑-->

<script>

  layui.use(['form', 'submitform','customTree','treeSelect'], function () {
        var $ = layui.$,
            form = layui.form,
            submitform = layui.submitform,
            customTree = layui.customTree;
    //为表单付出始值
    form.val('layui-form-role', {
      "useable":'${role.useable}',
    });


    //为表单赋值
    var officezTreeObj=customTree.render({
      elem: '#treeOffice',
      url: '/sys/office/treeData',
      rootId: '0',
      check:'true',
      value: '${role.officeIds}'
    });
    //数据
    /* var setting = {
       check: {
         enable: true,//显示复选或单选框
         chkStyle: "checkbox" //显示样式为单选
       },
       async: {
         enable: true,
         url: "/sys/menu/treeData",
         type: "GET"
       },
       data: {
         simpleData: {
           enable: true,
           idKey: "id",
           pIdKey: "pId",
           rootPId: 0
         }
       },
       callback: {
         onClick: function (event, treeId, treeNode) {
           zTreeObj.checkNode(treeNode, !treeNode.checked, true);
         },
         onAsyncSuccess: function (event, treeId, treeNode) {
           let currZtree = zTree.getZTreeObj(treeId);
           let nodeList = currZtree.getNodes();
           currZtree.expandNode(nodeList[0], true);
           ids.forEach(function (item) {
             let node = zTreeObj.getNodeByParam("id", item, null);
             try {
               node.checked = true;
               zTreeObj.updateNode(node);
             } catch (err) {
             }
           });
         }
       }
     };

     zTreeObj = zTree.init($("#treeDemo"), setting);*/
    /*zTreeObj=result*/
    form.on('select(scope)', function(data){
      //如果数据范围选择的是按照明细，则显示部门的权限
      if(data.value=="5"){
        $("#roleztree").show();
      }else {
        $("#roleztree").hide();
      }
    });

    form.on("submit(btnSubmit)", function (data) {
      let nodes = officezTreeObj.getCheckedNodes(true);
      let field = data.field;
      for (let i = 0; i < nodes.length; i++) {
        field['officeList[' + i + ']'] = nodes[i].id
      }

      // 请求后台
      submitform.form('/sys/role/saveRoleOffice',field);

      return false;
    });

  });
</script>

@}
